<template>
  <div>
    <div v-for="v in cartList" :key="v.id" class="item">
      <div>
        <van-checkbox :checked="v.state" @click="store.commit('switchState', v)"></van-checkbox>
      </div>
      <div style="flex: 1;">
        <van-card :price="v.price.toFixed(2)" :desc="v.word" :title="v.title" :thumb="v.images[0]">
          <template #num>
            <van-stepper v-model="v.count" @plus="store.commit('addCart', v)" @minus="store.commit('subCart', v)" />
          </template>
        </van-card>
      </div>
    </div>

    <van-submit-bar :price="totalPrice*100" button-text="提交订单" @submit="onSubmit">
      <van-checkbox :checked="totalState" @click="store.commit('switchAllState', !totalState)">全选</van-checkbox>
    </van-submit-bar>

  </div>
</template> 


<script lang="ts" setup>
import { RootState } from '@/store';
import { computed } from 'vue';
import { useStore } from 'vuex';
// import {} from ''

const store = useStore<RootState>();
const cartList = computed(() => store.state.cartList)
const totalPrice = computed(() => store.getters.totalPrice)
const totalState = computed(() => store.getters.totalState)
const onSubmit = () => console.log('点击按钮');
const onClickLink = () => console.log('修改地址');
</script>

<style>
.item {
  display: flex;
}

.van-submit-bar {
  bottom: 60px !important;
}
</style>